<%--
  Created by IntelliJ IDEA.
  User: zrw
  Date: 2019/12/13
  Time: 14:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../echarts/dist/echarts.min.js"></script>
    <script src="../echarts/theme/macarons.js"></script>
    <style type="text/css">
        * {
            color: #909399;
            font-size: 14px;
        }
        h1 {
            font-size: 22px;
            text-align: center;
        }
        .date {
            margin-left: 40px;
        }
        /* 去除el-table底部的滚动条 */
        .el-table__body-wrapper::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }
        .el-input__inner {
            color: #303133;
            font-weight: 600;
        }
        #chart {
            width: 800px;
            height: 400px;
            float: left;
            margin-top: 20px;
            /*border: 1px solid red;*/
        }
        #table-div {
            float: right;
        }
        input.el-input__inner {
            color: #86868b;
            font-weight: 600;
        }
        .el-table th .cell {
            color: #86868b;
            font-weight: normal;
        }
        .el-table td div {
            color: #86868b;
        }
    </style>
</head>
<body>
<h1>${groupName}成交量</h1>
<div id="app">
    <template>
        <div class="block date">
            <span class="demonstration">选择查询日期：</span>
            <el-date-picker
                    v-model="value1"
                    type="date"
                    value-format="yyyy-MM-dd"
                    @change="getSelectTime"
                    placeholder="选择日期">

            </el-date-picker>
        </div>

        <div class="block" id="table-div">
            <el-table :data="tableData" border @cell-click="handleCellClick" style="width: 440px; float: right;">
                <el-table-column prop="cName" label="姓名" width="180">
                    <template slot-scope="scope">
                        <div v-html="scope.row.cName" style="color: #909399; cursor: pointer;" ></div>
                    </template>
                </el-table-column>
                <el-table-column prop="success" label="成交量" width="80">
                    <template slot-scope="scope">
                        <div v-html="scope.row.success" style="color: #909399;"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="total" label="接通量" width="100">
                    <template slot-scope="scope">
                        <div v-html="scope.row.total" style="color: #909399;"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="rate" label="成交率" width="80">
                    <template slot-scope="scope">
                        <div v-html="scope.row.rate" style="color: #909399;"></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </template>
</div>
<div id="chart"></div>
<script>
    var datas = ${data};
    var names = [];
    var sucs = [];
    var counts = [];
    for (i in datas) {
        names[i] = datas[i].cName;
        sucs[i] = datas[i].success;
        counts[i] = datas[i].total;
    }
    var chart = echarts.init(document.getElementById('chart'), 'macarons');
    var option = {
        color: ['#E6A23C', '#67C23A'],
        /*title: {
            text: ''
        },*/
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['接通量', '成交量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: names,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        /*yAxis: {},*/
        series: [
            {
                name: '接通量',
                type: 'bar',
                barWidth: 20,
                data: counts
            },
            {
                name: '成交量',
                type: 'bar',
                barWidth: 20,
                data: sucs
            }
        ]
    };
    chart.setOption(option);
    var Main = {
        data() {
            return {
                value1: '${today}',
                tableData: ${data}
            }
        },
        methods: {
            getSelectTime(val) {
                var groupId = '${groupId}';
                var _this = this;
                $.ajax({
                    type: "post",
                    url: "listGroupMemberDate",
                    data: "gId=" + groupId + "&date=" + val,
                    success: function(data) {
                        _this.tableData = data;
                        datas = data;
                        names = [];
                        sucs = [];
                        counts = [];
                        for (i in datas) {
                            names[i] = datas[i].cName;
                            sucs[i] = datas[i].success;
                            counts[i] = datas[i].total;
                        }
                        chart = echarts.init(document.getElementById('chart'), 'macarons');
                        option = {
                            color: ['#E6A23C', '#67C23A'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            legend: {
                                data: ['接通量', '成交量']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: names,
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '接通量',
                                    type: 'bar',
                                    barWidth: 20,
                                    data: counts
                                },
                                {
                                    name: '成交量',
                                    type: 'bar',
                                    barWidth: 20,
                                    data: sucs
                                }
                            ]
                        };
                        chart.setOption(option);
                    }
                });
            },
            handleCellClick(row, column, cell, event) {
                location.href = "listGroupPerson?cId=" + row.id + "&cName=" + row.cName;
            }

        }
    }
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app');
</script>
</body>
</html>
